<template>
	<div>
		<h1>{{msg}}</h1>
		<el-row justify="center" class="el-row-self">
			<el-col :span="6">
				<div class="right">当前数据库</div>
			</el-col>
			<el-col :span="3" class="col-border">
				<div>{{currentDB}}</div>
			</el-col>
			<!--<el-col :span="3">
				<el-switch v-model="isTableHeadCenter" active-text="表头居中" inactive-text="表头靠左对齐">
				</el-switch>
			</el-col>-->
			<el-col :span="6">
				<div class="left">
					<el-button type="primary" @click="downloaddoc()">立即下载</el-button>
				</div>
			</el-col>
		</el-row>
		<h3>数据库变更</h3>
		<el-row justify="center">
			<el-col :span="18">
				<el-form :model="dbForm" :rules="rules" ref="dbForm" label-width="100px" class="dbForm">
					<el-form-item label="地址" prop="url">
						<el-input v-model="dbForm.url" clearable v-bind:disabled="disabled">
							<template #prepend>jdbc:mysql://</template>
						</el-input>
					</el-form-item>
					<el-form-item label="用户名" prop="username">
						<el-input v-model="dbForm.username" clearable v-bind:disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="dbForm.password" show-password clearable v-bind:disabled="disabled">
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="warning" @click="submitForm('dbForm')" v-bind:loading="loading">更变</el-button>
						<el-button @click="resetForm('dbForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import axios from '@/plugins/axios'
	import qs from 'qs'
	import {
		ElMessage
	} from 'element-plus'
	export default {
		name: 'DataBaseDoc',
		data() {
			return {
				msg: "数据库设计文档生成工具",
				currentDB: "",
				isTableHeadCenter: false,
				dbForm: {
					url: '',
					username: '',
					password: '',
				},
				senddata: {},
				rules: {
					url: [{
						required: true,
						message: '请输入数据库地址',
						trigger: 'blur'
					}],
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				},
				loading: false,
				disabled: false
			}
		},
		created: function() {
			this.getCurrentDB();
		},
		methods: {
			getCurrentDB() {
				axios.get('/api/currentDB').then(response => {
					this.currentDB = response.data;
				}).catch((error) => {
					console.log(error);
					ElMessage.warning('服务异常，请稍后访问!');
				});
			},
			downloaddoc() {
				axios.get('/api/produce', {
					params: {
						isTableHeadCenter: this.isTableHeadCenter
					}
				}).then(response => {
					let cd = response.headers["content-disposition"];
					let filename = "文档.doc";
					if (cd && cd.indexOf("fileName=") != -1) {
						filename = cd.split(";")[1].split("fileName=")[1];
						filename = decodeURI(filename);
					}
					const url = window.URL.createObjectURL(new Blob([response.data]))
					const link = document.createElement('a')
					link.href = url
					link.setAttribute('download', `${filename}`)
					document.body.appendChild(link)
					link.click()
					window.URL.revokeObjectURL(url); // 释放内存
				});
			},
			submitForm(formName) {
				let $this = this;
				let limit = 0;
				$this.loading = true;
				$this.disabled = true;
				$this.$refs[formName].validate((valid) => {
					if (valid) {
						$this.senddata = {
							...$this.dbForm
						};
						$this.senddata.url = "jdbc:mysql://" + $this.senddata.url;
						let base64 = require('js-base64').Base64;
						$this.senddata.password = base64.encode($this.senddata.password);
						axios.post("/api/change", qs.stringify($this.senddata));
						setTimeout(function(){
							var stop = setInterval(function() {
								axios.get("/api/currentDB").then(res => {
									if (res.status == 200) {
										clearInterval(stop);
										$this.currentDB = res.data;
										$this.loading = false;
										$this.disabled = false;
										$this.$options.methods.clearForm($this);
									}
									if (limit == 3) {
										clearInterval(stop);
										$this.$options.methods.clearForm($this);
										ElMessage.waring('服务重启异常，请稍后重试!');
									}
									limit++;
								});
							}, 1200);
						},1000);
					} else {
						ElMessage.error('请检查输入内容重新提交!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			clearForm(obj) {
				obj.dbForm.username = "";
				obj.dbForm.password = "";
				obj.dbForm.url = "";
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.el-row-self {
		line-height: 35px;
		padding: 15px 0;
	}

	.el-col .left {
		text-align: left;
		padding-left: 5px;
	}

	.el-col .right {
		text-align: right;
		padding-right: 5px;
	}

	.col-border {
		border: 1px solid #eee;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
</style>
